<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../lib/vue.js"></script>
  <link rel="stylesheet" href="../lib/animate.css">
</head>
<style>
    tr td{
      border:1px solid #333;
      padding:20px;
      text-align: center;
    }
    table{
      width:50%;
      background: orange;
      margin-top:20px;
    }

   
    ul{
      display: flex;
      padding:10px;
      background: pink;
      width:70%;
      list-style: none;
      }
      li{
          margin:0 10px;
          flex:1;
          padding:20px;
      }

      .zoom-enter-active{
        animation: zoomInDown .8s both;
      }

      .zoom-leave-active{
        animation: zoomOutDown 0.5s both;
      }
</style>
<body>
    <div id="app" >
      <h2> {{title}} </h2>
      <hr>
      <Head-one></Head-one>
      <mytable :cars="cars"> </mytable>
      <hr>
      <!-- 通过选项卡来修改cptId -->
      <select v-model="cptId">
        <option value="mytable">表格展示</option>
        <option value="mylist"> 列表展示</option>
      </select>
      
      <transition name="zoom" mode="out-in">
        <!-- 失活的组件将会被缓存！keep-alive-->
         <keep-alive>
          <component :is="cptId"  :cars="cars" ></component>
         </keep-alive>
         
      </transition> 

      
    </div>
    
    <template id="mytable">
        <table>
            <thead>
              <tr>
                <td>序号</td>
                <td>品牌</td>
                <td>颜色</td>
                <td>型号</td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(car,key,index ) in  cars" :key="index">
                <td>{{index+1}}</td>
                <td>{{car.brand}}</td>
                <td>{{car.color}}</td>
                <td>{{car.model }}</td>
              </tr>
            </tbody>
        </table>
    </template>


    <template id="mylist">
        <ul>
          <li v-for="(car,key,index) in cars" :key="index">
              <p>序号: {{index+1}}</p>
              <p>品牌: {{car.brand}}</p>
              <p>颜色: {{car.color}}</p>
              <p>型号: {{car.model}}</p>
          </li>
        </ul>
    </template>

    <script>


      const head = {
        template:"<h2>Head - Head - WH2110-daydayup</h2>"
      }
      Vue.component("HeadOne",head) 
      var cars = {
          car01 : {brand : "Ford", model : "Mustang", color : "red"},
          car02 : {brand : "Fiat", model : "500", color : "white"} ,
          car03 : {brand : "Volvo", model : "XC90", color : "black"}
      }

      Vue.component("mytable",{
        template:"#mytable",
        props:['cars'],
        mounted(){

        }
      })
      Vue.component("mylist",{
        template:"#mylist",
        props:['cars']
      })
      Vue.component("mytable",{
        template:"#mytable",
        props:['cars'],
        mounted(){
          console.log("我被新建了--table")
        },
        // 激活
        activated() {
          console.log("mytable 组件被激活了... ")
        },
        // 失活
        deactivated() {
          console.log("mytable 组件失活了... ")
        },
      })
      Vue.component("mylist",{
        template:"#mylist",
        props:['cars'],
        mounted () {
          
        },
        activated(){},
        deactivated(){}
      })
      // 根实例 根组件
      const vm = new Vue({
        data:{
          title:"Vue 组件 动态组件切换     ",
          word:'wh2110-daydayup',
          cars,
          toggle:true,
          cptId:"mytable"
        },
        mounted(){
          document.getElementsByTagName("title")[0].innerHTML = this.title;
        }
      }).$mount("#app")
    </script>
     <!-- 
        component 官方组件
        is 属性   表示当前显示的组件 组件名称
        keep-alive   失活的组件将会被缓存！   下一次失活组件重新激活的时候 会直接调用缓存数据  性能优化

        activated   激活
        deactivated 失活  

        transition 过渡组件 

        组件切换
        1. v-if
        2. v-show 
        3. component
        4. 路由 route 
     -->
</body>
</html> 